
<template>
  <div  class="main-div">
    <Row>
      <Col span="4">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>
      </Col>
      <Col span="20">


        <Card  dis-hover class="task-card">
          <div class="app-container">
            <el-row type="flex" justify="start"  style="margin-left: -14px">
              <el-form :inline="true" :model="queryForm" label-width='80px' inline size='mini'>


                <el-form-item label="实例状态">
                  <el-select v-model="queryForm.type" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
<!--                <el-form-item label="发起人">-->
<!--                  <el-input v-model="queryForm.startUserNo"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="模型名称">
                  <el-input v-model="queryForm.keyWord" clearable></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="queryForm.times"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    unlink-panels
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    end-placeholder="结束日期">
                  </el-date-picker>

                </el-form-item>
                <el-form-item style="margin-left: 14px">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>

            </el-row>


            <el-row class="margin:30px;">
              <el-col>
                <el-table
                  :data="tableData"
                  size="mini"
                  style="width: 100%"
                  :height="tableHeight"
                  border
                  @select="tableSelect"
                  @select-all="tableSelect"
                >
                  <el-table-column
                    fixed
                    prop="subject"
                    label="主题"

                    show-overflow-tooltip
                   >
                  </el-table-column>

                  <el-table-column
                    prop="title"
                    label="标题"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    prop="createTime"
                    label="发起时间"
                    show-overflow-tooltip
                   >
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    >
                    <template slot-scope="scope">
                      <el-button   size='mini' type='text' icon="el-icon-edit"   @click="details(scope.row.procId)"></el-button>

                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="queryForm.page"
                :page-size="queryForm.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-row>
          </div>
        </Card>
      </Col>


    </Row>
    <Row>
      <Col span="24">
      <footer></footer>
      </Col>
    </Row>
  </div>


</template>

<script>
  import {getUnReadList,getAllMsgType,tagReadMsg} from "@/api/msg"
  import {getStartUpRuningList} from "@/api/startup"
  import {getTaskData, getTaskChartData,getBpmnModelCategory} from "@/api/analy";


  import Footer from '../../../common/footer'

  export default {
    name: 'Task',
    components:{
      Footer
    },

    data() {
      return {
        options: [{
          value: 'running',
          label: '运行'
        }, {
          value: 'completed',
          label: '完成'
        }, {
          value: 'invalid',
          label: '作废'
        }],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        checkTableData: [],
        tableData: [],
        tableHeight: 450,
        total: 0,
        chartVisible: false,
        chartData: {},
        sellerId: 0,
        queryDate:[],
        shopName: [],
        queryForm: {
          start: "",
          end: "",
          times: [],
          name: "",
          title: "",
          page: 0,
          limit: 10,
          whereSql: "",
          type: "",
          startUserNo: "",
          keyWord: "",
          typeKey: ""
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },

    created() {
      this.getData()
    },
    methods: {
      remove:function(){
        var checkTableData=this.checkTableData;
        var ids=[];

        for (var i = 0; i <checkTableData.length ; i++) {
          ids.push(checkTableData[i].id);
        }
        tagReadMsg({ ids : ids }).then((response) => {
          if (response.code==0){
            this.checkTableData=[]
            this.getData()
          }
        })

      },
      tableSelect:function(data){
        this.checkTableData=data;
      },
      queryFormCreateTime:function(e){
        this.queryForm.createTime=e;
      },
      details:function(processInstanceId){
        this.$router.push({ name:'runDetails', query: { t: new Date().getTime(),"processInstanceId":processInstanceId}})
      },
      queryMethod:function(){
       this.getStartUpRuningListData();

      },
      refreshTask:function(data){
        if (data[0].parentId=='-1'){
          this.queryForm.typeKey=""
        } else{
          this.queryForm.typeKey=data[0].typeKey;

        }
        this.queryForm.page = 0
        this.queryForm.createTime=""
        this.queryDate = [];
        this.queryForm.times = [];
        this.queryForm.start = "";
        this.queryForm.end = "";

        this.getStartUpRuningListData();

      },
      getStartUpRuningListData:function(){

        const obj = JSON.parse(JSON.stringify(this.queryForm))
        delete (obj['times'])
        getStartUpRuningList(obj).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
          this.getStartUpRuningListData()

      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },

      search() {
        if (this.queryForm.times){

          this.queryForm.start=this.queryForm.times[0]
          this.queryForm.end=this.queryForm.times[1]
        }
        this.queryForm.page = 0
        this.queryForm.typeKey=""
        this.queryMethod()
      },
      reset() {
        this.queryForm.typeKey = "";
        this.queryForm.startUserNo = "";
        this.queryForm.keyWord = "";
        this.queryForm.title = "";
        this.queryDate = [];
        this.queryForm.times = [];
        this.queryForm.start = "";
        this.queryForm.end = "";
        this.queryForm.type = "";
        this.queryForm.page = 0

        this.queryMethod()
      }

    }

  }

</script>
<style lang="scss">
.task-card{
  margin-top: 10px;
}

</style>
